<template>
    <div class="patient-home">
        <!-- 顶部问候栏 -->
        <div class="greeting-section">
            <div class="user-info">
                <div class="avatar-wrapper">
                    <el-avatar :size="60"
                        src="https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                        class="custom-avatar" />
                </div>
                <span class="greeting-text">HI! Eric 病友</span>
            </div>
        </div>

        <!-- 功能卡片区域 -->
        <div class="cards-container">
            <!-- 报告查询卡片 -->
            <div class="feature-card report-card" @click="handleReportClick">
                <el-icon class="card-icon" style="font-size: 100px;">
                    <Document />
                </el-icon>
                <span class="card-text">报告查询</span>
            </div>

            <!-- 入量卡片 -->
            <div class="data-card">
                <div class="card-header">近24小时总入量ml</div>
                <div class="data-content">
                    <span class="data-value">{{ totalInput }}</span>
                    <el-button circle class="add-btn" @click="handleInputAdd">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-button>
                </div>
            </div>

            <!-- 出量卡片 -->
            <div class="data-card">
                <div class="card-header">近24小时总出量ml</div>
                <div class="data-content">
                    <span class="data-value">{{ totalOutput }}</span>
                    <el-button circle class="add-btn" @click="handleOutputAdd">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-button>
                </div>
            </div>

            <!-- 在线缴费卡片 -->
            <div class="feature-card payment-card" @click="handlePaymentClick">
                <el-icon class="card-icon" style="font-size: 100px;">
                    <CreditCard />
                </el-icon>
                <span class="card-text">在线缴费</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import http from '@/api/http'
import { Document, Plus, CreditCard } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

let patientCode = route.query.patientCode
if (!patientCode) {
  patientCode = '2'
}

const totalInput = ref(0)
const totalOutput = ref(0)

// 处理报告查询点击
const handleReportClick = () => {
    router.push('/PatientReport')
}
// 处理在线缴费点击
const handlePaymentClick = () => {
    router.push('/PayInfo')
}

// 处理入量添加点击
const handleInputAdd = () => {
    router.push('/input-record')
}

// 处理出量添加点击
const handleOutputAdd = () => {
    router.push('/output-record')
}

// 查询入量信息
const getInRecord = async () => {
    const res = await http.get(
        '/api/DoctorManage/GetInRecords',
        undefined,
        false,
        {
            params: {
                patientCode,
                firstTime: '',
                endTime: ''
            }
        }
    );
    console.log(res)
    const sum = res.data.reduce((sum: number, item: any) => sum + Number(item.inValue || 0), 0)
    totalInput.value = sum
}

// 查询出量信息
const GetOutRecords = async () => {
    const res = await http.get(
        '/api/DoctorManage/GetOutRecords',
        undefined,
        false,
        {
            params: {
                patientCode,
                firstTime: '',
                endTime: ''
            }
        }
    );
    console.log(res)
    const sum = res.data.reduce((sum: number, item: any) => sum + Number(item.outValue || 0), 0)
    totalOutput.value = sum
}

onMounted(() => {
    getInRecord();
    GetOutRecords();
})

</script>

<style scoped>
.patient-home {
    min-height: 100vh;
    padding: 20px;
    background-color: #f0f9f9;
}

.greeting-section {
    margin-bottom: 40px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.greeting-text {
    font-size: 24px;
    font-weight: 500;
    color: #333;
}

.avatar-wrapper {
    position: relative;
    margin-right: 16px;
}

:deep(.custom-avatar) {
    border: 2px solid #1890ff;
    box-shadow: 0 0 15px rgba(24, 144, 255, 0.6);
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s ease;
}

:deep(.custom-avatar:hover) {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(24, 144, 255, 0.8);
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

.feature-card {
    height: 220px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.report-card {
    background-color: #8e9aeb;
}

.payment-card {
    background-color: #67c23a;
}

.card-icon {
    color: #fff;
    margin-bottom: 20px;
}

.card-text {
    font-size: 24px;
    color: #fff;
    font-weight: 500;
}

.data-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-header {
    font-size: 16px;
    color: #666;
    margin-bottom: 16px;
}

.data-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.data-value {
    font-size: 36px;
    font-weight: bold;
    color: #333;
}

.add-btn {
    background-color: #409eff;
    color: #fff;
}

.add-btn:hover {
    background-color: #66b1ff;
}

:deep(.el-button.is-circle) {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

:deep(.el-icon) {
    font-size: 20px;
}
</style>
